import React from 'react'
import '../styles/foot.scss'
import { Badge } from 'antd-mobile';
import { PicturesOutline, AppstoreOutline, TruckOutline, UserOutline } from 'antd-mobile-icons'
import { NavLink, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
export const footList = [
    { path: '/app/home', name: '首页', icon: <PicturesOutline />, ico: 'icon-home' },
    { path: '/app/classify', name: '分类', icon: <AppstoreOutline />, ico: 'icon-gengduo' },
    { path: '/app/cart', name: '购物车', icon: <TruckOutline />, ico: 'icon-shangcheng', hot: true },
    { path: '/app/mine', name: '我的', icon: <UserOutline />, ico: 'icon-wode' },
]

export const MyFoot = () => {
    const location = useLocation()
    const cartList = useSelector((state: any) => state.data.cartList)
    return (
        <footer>
            {
                footList.map((item, index) => (
                    <div key={index}>
                        <NavLink to={item.path} >
                            <i className={'iconfont ' + item.ico}> </i>
                            <span>{item.name}</span>
                            {
                                item.hot && <Badge className='hot' content={cartList.length} color={location.pathname == item.path ? '#f50' : '#999'} />
                            }
                        </NavLink>
                    </div>
                ))
            }
        </footer>
    )
}

